<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Text – Typography</title>
    <style>
        body {
            font-family: "Inter", system-ui, -apple-system, sans-serif;
            background: #030712;
            color: #e5e7eb;
            margin: 0;
            padding: 32px;
        }
        article {
            max-width: 720px;
            margin: 0 auto;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0 0 0.5em;
            line-height: 1.1;
            color: #f9fafb;
        }
        p {
            line-height: 1.7;
            margin: 0 0 1em;
        }
        blockquote {
            border-left: 3px solid #60a5fa;
            padding-left: 16px;
            margin: 0 0 1.2em;
            color: #cbd5f5;
            font-style: italic;
        }
        code {
            background: rgba(148, 163, 184, 0.18);
            padding: 2px 4px;
            border-radius: 4px;
            font-size: 0.9em;
        }
        a {
            color: #38bdf8;
        }
        small {
            font-size: 0.85em;
            color: #94a3b8;
        }
    </style>
</head>
<body>
    <article>
        <h1>Heading One</h1>
        <p>
            Intro paragraph with a <strong>strong</strong> word, an <em>emphasized</em> word, and
            a link to <a href="https://grida.co">grida.co</a>.
        </p>
        <h2>Heading Two</h2>
        <p>
            Additional text with inline <code>code()</code> and a <abbr title="HyperText Markup Language">HTML</abbr>
            abbreviation.
        </p>
        <h3>Heading Three</h3>
        <blockquote>Typography quote sample highlighted with a border.</blockquote>
        <h4>Heading Four</h4>
        <p>
            <mark>Highlighted text</mark> combined with <u>underline</u> for contrast.
        </p>
        <h5>Heading Five</h5>
        <p>
            <small>Small print for captions or legal disclaimers.</small>
        </p>
        <h6>Heading Six</h6>
    </article>
</body>
</html>

